<template>
  <div class="box">
    <div class="box1">
      <div class="box2">
        <van-row type="flex" justify="space-between">
          <van-col span="10">
            <!-- <van-icon name="cart-o" color="#1989fa" />
            <van-icon name="cart-o" color="#1989fa"/> -->
          </van-col>
        </van-row>
        <van-uploader :after-read="afterRead" />
        <div class="imgs_box">
          <img src="../assets/images/nv.jpg" alt="" />
        </div>
        <van-row type="flex" justify="center" id="row2">
          <van-col span="">空谷有兰</van-col>
        </van-row>
        <van-row type="flex" justify="center">
          <van-col span="">亲家ID：1235886</van-col>
        </van-row>

        <div class="label">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>2</li>
            <li>2</li>
          </ul>
        </div>

        <van-row type="flex" justify="space-between" id="row4">
          <van-col span="">10</van-col>
          <van-col span="">20</van-col>
          <van-col span="">30</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" id="row5">
          <van-col span="">喜欢我的</van-col>
          <van-col span="">我喜欢的</van-col>
          <van-col span="">我待定的</van-col>
        </van-row>
      </div>
    </div>

    <!-- 个人信息 -->
    <div class="msg" style="margin-top: 20px">
      <div class="title">
        <b>个人信息</b>
        <img src="" alt="" />
      </div>
      <div class="title_msg">
        <ul>
          <li>
            <img src="../assets/img/bir.png" alt="" />
            <i>年龄信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/addr.png" alt="" />
            <i>户籍信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/school.png" alt="" />
            <i>学历信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/work.png" alt="" />
            <i>工作信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/money.png" alt="" />
            <i>年薪信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/cart.png" alt="" />
            <i>车房信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/msg.png" alt="" />
            <i>简单描述</i>
            <span class="more">2000000000000000000000000000000000000008</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 择偶意向 -->
    <div class="choose">
      <div class="title">
        <b>择偶意向</b>
        <img src="" alt="" />
      </div>
      <div class="title_msg">
        <ul>
          <li>
            <img src="../assets/img/bir.png" alt="" />
            <i>年龄信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/addr.png" alt="" />
            <i>户籍信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/school.png" alt="" />
            <i>学历信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/work.png" alt="" />
            <i>工作信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/money.png" alt="" />
            <i>年薪信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/cart.png" alt="" />
            <i>车房信息</i>
            <span>28</span>
          </li>
          <li>
            <img src="../assets/img/msg.png" alt="" />
            <i>简单描述</i>
            <span class="more"
              >1212132123121211221322132121111121212121232121121212312121212123213221213212321212313212111111</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style scoped>
.box {
  position: relative;
  width: 650px;
  height: 1200px;
  /* background-color: red; */
  float: left;
  top: -490px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 150px;
}
.box1 {
  width: 570px;
  /* height: 300px; */
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 100px;
  left: 0;
  padding: 100px 40px 40px 40px;
  border-radius: 40px;
}
.box1 .label {
  width: 570px;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box2 {
  font-size: 35px;
}
.box2 > #row2 {
  margin-top: 20px;
}
.box2 > #row4 {
  margin-top: 50px;
  padding: 0 30px;
}
.box2 > #row5 {
  font-size: 30px;
}
div/deep/.van-uploader {
  position: absolute;
  top: -100px;
  right: 200px;
  z-index: 120;
}
div/deep/.van-icon-photograph:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("../assets/img/choose.png");
  background-size: 100%;
  transform: translateY(4px);
}
div/deep/.van-uploader__upload {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.msg,
.choose {
  z-index: 200;
  transform: translateY(500px);
  width: 650px;
  /* height: 450px; */
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 5px 10px 6px #eee;
}
.choose {
  transform: translateY(550px);
}
.msg .title,
.choose .title {
  margin: 0px 30px;
  display: flex;
  justify-content: space-between;
  font-size: 34px;
  border-bottom: 1px solid #eee;
  line-height: 80px;
}
.msg .title_msg,
.choose .title_msg {
  padding: 20px 40px 0;
  font-size: 30px;
}
.msg .title_msg ul li,
.choose .title_msg ul li {
  line-height: 50px;
}
.msg .title_msg ul li img,
.choose .title_msg ul li img {
  width: 30px;
  transform: translateY(4px);
  margin-right: 5px;
}
i {
  font-style: normal;
}
.msg .title_msg ul li span,
.choose .title_msg ul li span {
  margin-left: 10px;
}
.msg .title_msg ul li .more,
.choose .title_msg ul li .more {
  display: inline-block;
  max-width: 500px;
  max-height: 100px;
  word-wrap: break-word;
  padding: 3px 0;
  padding-right: 20px;
  overflow: hidden;
}
.imgs_box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -100px;
  left: 230px;
}
.imgs_box img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  transform: translate(10px, 10px);
}
</style>
